/**
 * @author kobe
 * @date   16/06/12
 */

import Select from "../components/form/Select.js"

(function (lf, r) {
    var RC = r.createClass,
        imgs = '',
        selectPhoto = lf.bridgeJs.selectPhoto,
        ajax = lf.utils.ajax;

    const  TEXT = 'text';

    var ChooseInput = RC({
        render:function () {
            var info = this.props.info;
            return(
                <div>
                    <div className="mui-input-row">
                        <label>{info.title}</label>
                        <Select addClass="select-input" ref='select' value={info.val} name={info.name}
                                groupCode={info.code} disabled={info.disabled} />
                    </div>
                </div>
            )
        }
    });

    var TextInput = RC({
        componentDidMount:function () {

        },
        render:function () {
            var info = this.props.info;
            if(info.readonly=='readonly' && !(info.val=='')){
                var readonly = true
            }
            return(
                <div className="mui-input-row">
                    <label>{info.title}</label>
                    <input className="me-info" type="text" id={info.name} readOnly={readonly} placeholder={info.val}
                           type={info.type || 'text'} />
                </div>
            )
        }
    });


    var InputContainer = RC({
        render:function () {
            var info = this.props.info;

            if(info.type == 'text'){
                var setInput = <TextInput info={info.info} ref="inputText" />
            }else if(info.type == 'choose') {
                var setInput = <ChooseInput info={info.info} ref="choose"/>
            }

            return(
                <div>
                    {setInput}
                </div>
            )
        }
    });

    var SetList = RC({
        setListData(){
            var user = this.props.user,
                birthday = lf.utils.format(user.birthday,'yyyy-MM-dd') || ''

            var sex = user.sex == '1' ? "男" : user.sex == '2' ? "女" : "未知";

            function ages(str) //根据生日判断年龄
            {
                var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
                if(r==null)return;
                var   d=   new   Date(r[1],   r[3]-1,   r[4]);
                if   (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4])
                {
                    var   Y   =   new   Date().getFullYear();
                    return((Y-r[1]));
                }
                return(" ");
            }

            return [
                {
                    type : TEXT,
                    info:{
                        val : user.name,
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "姓名",
                        readonly:'readonly'
                    },

                },
                {
                    type : TEXT,
                    info:{
                        val : sex,
                        type: 'text',
                        name: 'sex',
                        ref: 'sex',
                        title: "性别",
                        readonly:'readonly'
                    },

                },
                {
                    type : TEXT,
                    info:{
                        val : ages(birthday),
                        type: 'text',
                        name: 'age',
                        ref: 'age',
                        title: "年龄",
                        readonly:'readonly'
                    },
                },
                {
                    type : TEXT,
                    info:{
                        val : user.number,
                        type: 'text',
                        name: 'workNum',
                        ref: 'workNum',
                        title: "工号",
                        readonly:'readonly'
                    },
                },
                {
                    type : TEXT,
                    info:{
                        val : user.positionName,
                        type: 'text',
                        name: 'station',
                        ref: 'station',
                        title: "岗位类型",
                        readonly:'readonly'
                    },

                },
                {
                    type : TEXT,
                    info:{
                        val : user.departmentName,
                        type: 'text',
                        name: 'branch',
                        ref: 'branch',
                        title: "所属部门",
                        readonly:'readonly'
                    },

                },
                {
                    type : TEXT,
                    info:{
                        val : user.phone,
                        type: 'number',
                        name: 'phone',
                        ref: 'phone',
                        title: "联系电话",
                        readonly:'readonly'
                    },

                },

            ]
        },
        getInitialState() {
            return {
                user:''
            }
        },
        componentWillMount: function () {

        },
        render:function () {
            // console.log(this.state);
            var info = this.setListData();
            var a=0;
            var list = info.map(function (data) {
                a++;
                return(
                    <InputContainer key={a} info={data}  ref="inputCtr" />
                )
            });
            return(
                <div>
                    <Portrait imgUrl={this.props.user.portraitUrl}/>
                    <form className="mui-input-group">
                        {list}
                    </form>
                </div>
            )
        }
    });

    var Portrait = RC({
        componentWillMount(){
            var me = this;



        },
        clickFn(){
            selectPhoto(1);
        },

        render(){
            return(
                <div className="mui-table-view-cell portrait">
                    <span className="title">头像</span>
                    <div className="mui-pull-right head-img">
                        <a href="javascript:;" ref="setPhoto" onTouchEnd={this.clickFn}>
                            <img className="mui-action-preview" id="setPhoto" src={this.props.imgUrl || '../public/images/finger/me-head.png'} />
                        </a>
                    </div>
                </div>
            )
        }
    })

    var Container = RC({
        getInitialState: function () {
            return (
                {
                    user: '',
                }
            )
        },
        componentWillMount:function () {
            var me = this;

            lf.appJs.getUser(userInfo => {
                ajax({
                    type: "POST",
                    data:{
                        staffId: userInfo.id
                    },
                    success: function(data) {
                        //成功
                        if ( data.code == '200' ) {
                            var data = data.data;
                            // console.log(data);
                            me.setState({
                                user: data
                            });
                        }
                        else{
                            alert(data.desc);
                        }
                    }
                },lf.api.staffInfo);
            });
        },
        componentDidMount(){

        },
        render: function () {
            //增加mask防止用户误按
            return (
                <div className="finger-me-profile">
                    <div className="mask"></div>
                    <SetList user={this.state.user} />
                </div>
            )
        }
    });

    lf.bridgeJs.getUser(function (user) {
        r.render(
            <Container user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css('background', 'none');
                $('.mask').hide(1000);

                lf.bridgeJs.registerHandler("getPhotoFromApp", function(data, cb) {
                    // alert(data);
                    $('#setPhoto').attr('src',data);
                    imgs = data.toString();//上传图片时要用到
                    lf.bridgeJs.uploadImg(imgs.toString(),updatePhoto);
                });

                var updatePhoto = function(url){
                    ajax({
                        type: 'post',
                        data: {
                            staffId: user.id,
                            portraitUrl: url
                        },
                        success: function(data) {
                            //成功
                            if ( data.code == '200' ) {
                                setTimeout(function () { //避免与图片上传提示重叠
                                    mui.toast('保存成功');
                                },300);

                            }
                            else{
                                console.log(data.desc);
                            }
                        }
                    },lf.api.staff.updateStaff);
                }
            }
        )
    })

})(liefeng, React);
